<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >发起评定</el-button
        >
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        element-loading-text="Loading"
        height="calc(100% - 190px)"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55">
          <el-table-column type="selection"></el-table-column>
        </el-table-column>
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" title="筛选">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column label="评定单编号">
          <el-table-column prop="num">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.num"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <el-link type="primary" @click="toView(scope.row)">
                {{ scope.row.num }}</el-link
              >
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="供应商编号">
          <el-table-column prop="supplierNum">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.supplierNum"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.sysBusinessSupplier != null
                    ? scope.row.sysBusinessSupplier.num
                    : ""
                }}</span
              >
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="供应商名称">
          <el-table-column prop="supplierName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.supplierName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <span>{{
                scope.row.sysBusinessSupplier != null
                  ? scope.row.sysBusinessSupplier.supplierName
                  : ""
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="评分">
          <el-table-column prop="score"> </el-table-column>
        </el-table-column>
        <el-table-column label="评定结果">
          <el-table-column prop="opinion">
            <template slot-scope="scope">
              <span>{{ Opinion[scope.row.opinion] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="状态">
          <el-table-column prop="state">
            <template #header>
              <el-select v-model="queryForm.state" placeholder="请选择">
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <span>{{ Status[scope.row.state] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="创建人">
          <el-table-column prop="creatorName">
            <template #header>
              <el-input
                v-model="queryForm.creatorName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="创建时间">
          <el-table-column prop="createTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.createTimeList"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="通过时间">
          <el-table-column prop="passTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.passTimeList"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.passTime) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作">
          <el-table-column>
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">搜索</el-link>
                <el-link @click="cancelForm">清空</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div
                v-if="scope.row.state == 10 || scope.row.state == 40"
                class="base-table-operation"
              >
                <el-link
                  v-rights="'Update'"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >编辑</el-link
                >
                <el-link
                  v-rights="'Cancellation'"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >作废</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <SupplierEvaluationDialog
      v-if="isShowDialog"
      :id.sync="editId"
      :dialog-form-visible.sync="isShowDialog"
      :foreign-key-id.sync="foreignKeyId"
      :read-only-info.sync="readOnlyInfo"
      @close="getList"
    />
  </div>
</template>
<script>
import { Status, Opinion } from "../../../api/Supplier/SupplierEvaluation.js";
import { formatTime } from "../../../utils/time";
import {
  SupplierEvaluationGetList,
  evaluationCancellation,
} from "../../../api/Evaluation/Evaluation";
import SupplierEvaluationDialog from "./SupplierEvaluationDialog.vue";
export default {
  name: "SupplierEvaluationList",
  components: { SupplierEvaluationDialog },
  data() {
    return {
      list: [],
      tableDatas: [],
      stateList: [
        {
          label: "待提交",
          value: 10,
        },
        {
          label: "审核中",
          value: 20,
        },
        {
          label: "已通过",
          value: 30,
        },
        {
          label: "已驳回",
          value: 40,
        },
        {
          label: "已作废",
          value: 50,
        },
      ],
      Status,
      Opinion,
      formatTime,
      queryForm: {
        num: "",
        supplierName: "",
        supplyProduct: "",
        creatorName: "",
        status: null,
        type: 10,
        createTimeList: [],
        passTimeList: [],
        createTimeStart: null,
        createTimeEnd: null,
        passTimeStart: null,
        passTimeEnd: null,
      },
      loading: false,
      showFilterRow: false,
      isShowDialog: false,
      readOnlyInfo: false,
      editId: "",
      foreignKeyId: "",
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getList();
    const id = this.$route.query.id;
    if (id !== undefined && id !== null) {
      this.foreignKeyId = id;
      this.onNew();
    }
  },
  methods: {
    toView(row) {
      this.handlelook(row);
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      //   this.loading = true;
      SupplierEvaluationGetList(this.queryForm, this.pagination).then((res) => {
        this.list = res.data.dataList;
        this.pagination.total = res.data.total;
      });
    },
    handlelook(row) {
      this.readOnlyInfo = true;
      this.editId = row.id;
      this.isShowDialog = true;
    },
    handleEdit(row) {
      this.readOnlyInfo = false;
      this.editId = row.id;
      this.isShowDialog = true;
    },
    // 删除
    handleDelete(row) {
      this.$confirm("是否确定作废此数据?", "删除", {
        type: "warning",
        confirmButtonText: "删除",
        okType: "danger",
        center: true,
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            evaluationCancellation({ id: row.id })
              .then((res) => {
                this.getList();
              })
              .finally(() => {
                instance.confirmButtonLoading = false;
                done();
              });
          } else {
            instance.confirmButtonLoading = false;
            done();
          }
        },
      });
    },
    onNew() {
      this.editId = "";
      this.readOnlyInfo = false;
      this.isShowDialog = true;
    },
    onQuery() {
      if (
        this.queryForm.createTimeList !== null &&
        this.queryForm.createTimeList.length !== 0
      ) {
        this.queryForm.createTimeStart =
          this.queryForm.createTimeList[0] + " 00:00:00";
        this.queryForm.createTimeEnd =
          this.queryForm.createTimeList[1] + " 23:59:59";
      }
      if (
        this.queryForm.passTimeList !== null &&
        this.queryForm.passTimeList.length !== 0
      ) {
        this.queryForm.passTimeStart =
          this.queryForm.passTimeList[0] + " 00:00:00";
        this.queryForm.passTimeEnd =
          this.queryForm.passTimeList[1] + " 23:59:59";
      }
      this.getList();
    },
    // 查看
    DialogCall() {
      this.getList();
    },
  },
};
</script>
